<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>Drag n Drop</title>
    <link rel="apple-touch-icon" href="space_icon.png"/>
    <link rel="apple-touch-startup-image" href="space_splash.png" />
	<link rel="stylesheet" href="/jquery/jquery.mobile-1.1.0.css" />

	<script src="/jquery/jquery-1.7.2.js"></script>
	<!--script src="/jquery/jquery.mobile-1.1.0.js"></script-->

	<script src="js/Touch.js"></script>
	<script src="js/DnD.js"></script>
<script>

/**
 * Drag Events!
 */
var dragsource = null;

$(document).ready(function() {
	$(document).bind("xdragstart", function(event) {
		event.target.innerHTML += "s";
		dragsource = $(event.target);

		var image = document.createElement("img");
		image.src = "gfx/ship16.png";
		event.dataTransfer.setDragImage(image, -16, -16);
//		event.dataTransfer.setData("text", "test"+ dragsource.find("div").text());
	});
	$(document).bind("xdrag", function(event) {
		event.target.innerHTML += "d";
	});
	$(document).bind("xdragend", function(event) {
		event.target.innerHTML += "n";
	});
	$(document).bind("xdragenter", function(event) {
		event.target.innerHTML += "e";
		$(event.target).addClass("drop-target");
	});
	$(document).bind("xdragover", function(event) {
		event.target.innerHTML += "o";
	});
	$(document).bind("xdragleave", function(event) {
		event.target.innerHTML += "l";
		$(event.target).removeClass("drop-target");
	});
	$(document).bind("xdrop", function(event) {
		event.target.innerHTML += "x";
		$(event.target).removeClass("drop-target");

//		alert(event.dataTransfer.getData("text"));

		if (dragsource != event.target) {
			var valueA = 1 * $(dragsource).find("div").text();
			$(dragsource).find("div").text(valueA - 1);
			var valueB = 1 * $(event.target).find("div").text();
			$(event.target).find("div").text(valueB + 1);
		}
	});
});

$(document).ready(function() {
	$(".draggable").attr("draggable", "true");

	$(document).bind("dragstart", function(event) {
		event.target.innerHTML += "S";
		dragsource = $(event.target);
		event.originalEvent.dataTransfer.effectAllowed = "all";

		var image = document.createElement('img');
		image.src = 'gfx/ship.png';
		image.width = 100;
		event.originalEvent.dataTransfer.setDragImage(image, 16, 16);
	});
	$(document).bind("drag", function(event) {
		event.target.innerHTML += "D";
	});
	$(document).bind("dragenter", function(event) {
		event.target.innerHTML += "E";
		if (!$(event.target).hasClass("droppable")) return;
		$(event.target).addClass("drop-target");

//		var image = document.createElement('img');
//		image.src = 'gfx/system24.png';
//		image.width = 100;
//		event.originalEvent.dataTransfer.setDragImage(image, 0, 0);
	});
	$(document).bind("dragover", function(event) {
		event.target.innerHTML += "O";
		if (!$(event.target).hasClass("droppable")) return;
		event.preventDefault();
	});
	$(document).bind("dragleave", function(event) {
		event.target.innerHTML += "L";
		if (!$(event.target).hasClass("droppable")) return;
		$(event.target).removeClass("drop-target");
	});
	$(document).bind("drop", function(event) {
		event.target.innerHTML += "X";
		$(event.target).removeClass("drop-target");

		if (dragsource != event.target) {
			var valueA = 1 * $(dragsource).find("div").text();
			$(dragsource).find("div").text(valueA - 1);
			var valueB = 1 * $(event.target).find("div").text();
			$(event.target).find("div").text(valueB + 1);
		}
	});
	$(document).bind("dragend", function(event) {
		event.target.innerHTML += "N";
	});
});

</script>
<style>
body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.box {
	dis play: inline-block;
	width: 100px;
	height: 70px;
	border: 2px solid black;
	background-color: #8080FF;
}

.box div {
	border: 1px solid red;
}

.drop-target {
	background-color: #FFFF80;
}

</style>
</head>
<body>
<div>
<div id="box1" class="box xdraggable">#1<div>0</div></div>
<div id="box2" class="box xdraggable xdroppable">#2<div>0</div></div>
<div id="box3" class="box xdroppable">#3<div>0</div></div>
</div>

<div>
<div id="box4" class="box draggable">#1<div>0</div></div>
<div id="box5" class="box draggable droppable">#2<div>0</div></div>
<div id="box6" class="box droppable">#3<div>0</div></div>
</div>
</body>
</html>
